<template>
  <div>
      <h1>姓名:{{name}}</h1>
      <h2>年龄:{{age}}</h2>
      <h3>状态:{{describe}}</h3>
      <h4>快来联系我吧:{{phone}}</h4>
      <button @click="showRowPerson">显示原始的数据</button>
      <h5 v-if="person.car">车辆名称:{{person.car.name}}</h5>
      <h5 v-if="person.car">车辆价格:{{person.car.price}}W</h5>
      <button @click="person.car.name+='~'">修改车辆名称</button>
      <button @click="person.car.price--">修改车辆价格</button>
      <button @click="addCar">添加车辆信息</button>
  </div>
</template>

<script>
import { reactive,toRefs,toRaw,markRaw} from 'vue'
export default {
    name: 'toRow',
    /*
    * toRow:作用是将reactive生成的响应对象转换成普通对象
    *使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的操作，都不会引起页面的更新。
    *
    *markRow作用：
    *标记一个对象，使其永远不会成为响应式对象
    *应用场景:
    *1、有些值不应被设置成响应式的,例如复杂的第三方库等
    *2、当渲染具有不可变数据的大列表时，跳过响应式可以提高渲染性能。
    */
      setup() {
          let person = reactive({
              name:"陈杉杉",
              age:23,
              describe:"认真学习的好孩子",
              phone:"17313704676"
          })

          function showRowPerson(){
              console.log(person)
              console.log(toRaw(person))
          }

          function addCar(){
              /*
              *如果没收使用markRow，就可以更改car对象里面的信息
              */
              let car = {name:"奥迪A3",price:7}
              person.car = markRaw(car)
          }

          return {
              person,
              ...toRefs(person),
              showRowPerson,
              addCar
          }
      }
  };
</script>
<style scoped>
</style>